﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <div class="edit_pagecontainer">
            <div class="edit_formcontainer">
                <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rules">
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="基本信息" name="info">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="姓名" prop="DisplayName">
                                        <el-input v-model="form.DisplayName" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="登录名" prop="LoginID">
                                        <el-input v-model="form.LoginID" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="状态">
                                        <el-radio v-model="form.IsEnable" :label="1" :disabled="true">启用</el-radio>
                                        <el-radio v-model="form.IsEnable" :label="0" :disabled="true">禁用</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="性别">
                                        <el-radio v-model="form.Sex" :label="1" :disabled="true">男</el-radio>
                                        <el-radio v-model="form.Sex" :label="0" :disabled="true">女</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="固定电话">
                                        <el-input v-model="form.Tel" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="手机">
                                        <el-input v-model="form.Mobile" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="电子邮件">
                                        <el-input v-model="form.Email" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="邮编">
                                        <el-input v-model="form.Fax" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                        <el-collapse-item title="角色设置" name="role">
                            <el-checkbox v-for="role in roleList" v-model="role.IsCheck" :key="role.RowGuid">
                                {{role.RoleName}}
                            </el-checkbox>
                        </el-collapse-item>
                    </el-collapse>

                </el-form>
            </div>
        </div>
        <div class="edit_opcontainer">
            <el-button type="primary" v-on:click="handleSubmit">保 存</el-button>
            <el-button v-on:click="close">取 消</el-button>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
@Scripts.Render("~/Resource/component/tree/index.js")
<script>
    var detailUrl = GetRootPath() + "Frame/User/FindRelationDetail";
    var updateUrl = GetRootPath() + "Frame/Role/OperateUpdateRelation";
    var pageData = {
        //data
        form: {

        },
        roleList: [],
        activeNames: ['info', 'role'],
        //rules
        rules: {
            DisplayName: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }, ],
            LoginID: [{
                required: true,
                message: '请输入登录名',
                trigger: 'blur'
            }, ],
        },
        //css
        labelWidth: '100px'
    };

    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            this.bindDetail();
        },
        methods: {
            bindDetail: function () {
                var data = {
                    RowGuid: GetUrlParam("RowGuid")
                }
                JsonAjaxPost(detailUrl, JSON.stringify(data), function (result,
                    status) {
                    if (result.code == 0) {
                        pageData.form = result.data
                        Vue.set(pageData, "roleList", JSON.parse(result.data.RoleList))
                    }
                })
            },
            handleSubmit: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        var data={
                            UserGuid:pageData.form.RowGuid,
                            RoleList:JSON.stringify(pageData.roleList)
                        }
                        JsonAjaxPost(updateUrl, JSON.stringify(data), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '保存成功！', function () {
                                    CloseDialog();
                                })
                            } else {
                                OpenFail('提示', '保存失败！')
                            }
                        })
                    }
                });
            },
            close: function () {
                CloseDialog();
            },
            nodeChange: function (val) {
                pageData.form.OUGuid = val;
            },

        }
    })
</script>

</html>
